<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>如何优化网页性能</title>
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #3b82f6;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-600: #4b5563;
            --gray-800: #1f2937;
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: white;
            color: var(--gray-800);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 1.5rem;
        }
        .article-header {
            margin-bottom: 2rem;
        }
        .article-header h1 {
            font-size: 2rem;
            margin-bottom: 1rem;
            font-weight: 600;
            line-height: 1.3;
        }
        .article-meta {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            font-size: 0.875rem;
            color: var(--gray-600);
            margin-bottom: 1.5rem;
        }
        .article-meta .author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .article-meta .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--gray-200);
        }
        .article-content {
            font-size: 1.0625rem;
            line-height: 1.8;
        }
        .article-content h2 {
            font-size: 1.5rem;
            margin: 2rem 0 1rem;
            font-weight: 600;
            color: var(--gray-800);
        }
        .article-content h3 {
            font-size: 1.25rem;
            margin: 1.5rem 0 0.75rem;
            font-weight: 600;
            color: var(--gray-800);
        }
        .article-content p {
            margin-bottom: 1.5rem;
        }
        .article-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 1.5rem 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .article-content pre {
            background: var(--gray-100);
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 1.5rem 0;
            font-size: 0.9375rem;
        }
        .article-content code {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            background: var(--gray-100);
            padding: 0.2em 0.4em;
            border-radius: 4px;
            font-size: 0.9375rem;
        }
        .article-content blockquote {
            border-left: 4px solid var(--primary);
            padding-left: 1rem;
            margin: 1.5rem 0;
            color: var(--gray-600);
            font-style: italic;
        }
        .article-footer {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid var(--gray-200);
        }
        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--primary);
            font-weight: 500;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            .article-header h1 {
                font-size: 1.75rem;
            }
            .article-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="article-header">
            <h1>如何优化网页性能：10个实用技巧</h1>
            <div class="article-meta">
                <div class="author">
                    <div class="author-avatar"></div>
                    <span>前端技术专家</span>
                </div>
                <span>2025-08-15</span>
                <span>阅读量 1,245</span>
            </div>
        </div>

        <div class="article-content">
            <p>在现代Web开发中，页面性能直接影响用户体验和业务指标。研究表明，页面加载时间每增加1秒，转化率就会下降7%。本文将介绍10个经过验证的网页性能优化技巧。</p>
            
            <h2>1. 资源压缩与最小化</h2>
            <p>使用工具如Webpack、Rollup或Vite对JavaScript和CSS进行压缩：</p>
            <pre><code>// webpack.config.js
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
  },
};</code></pre>
            
            <h2>2. 图片优化</h2>
            <p>采用现代图片格式如WebP，并使用响应式图片：</p>
            <img src="https://example.com/performance-graph.jpg" alt="性能优化前后对比图">
            
            <h2>3. 代码分割与懒加载</h2>
            <p>使用动态导入实现按需加载：</p>
            <pre><code>const HeavyComponent = React.lazy(() => import('./HeavyComponent'));</code></pre>
            
            <h2>4. 缓存策略</h2>
            <blockquote>"良好的缓存策略可以减少60%以上的重复请求" — Web性能专家</blockquote>
            
            <h2>5. 关键渲染路径优化</h2>
            <p>内联关键CSS，异步加载非关键资源：</p>
            <pre><code><link rel="preload" href="font.woff2" as="font" crossorigin></code></pre>
            
            <p>通过实施这些优化措施，我们成功将某电商网站的首屏时间从5.2秒降低到1.3秒，转化率提升了18%。</p>
        </div>

        <div class="article-footer">
            <a href="search.html" class="back-link">← 返回搜索结果</a>
        </div>
    </div>
</body>
</html>